<template>
  <div class="goods">
    <!-- 位置显示 -->
    <div class="position">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }"
          >新闻管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>新闻列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 1. 搜索区域 -->
    <div class="header">
      <!-- change	仅在输入框失去焦点或用户按下回车时触发 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="新闻标题">
          <el-input v-model="searchItem" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-button type="primary" @click="search">查询</el-button>
      </el-form>
    </div>

    <div class="wrapper">
      <table border="1" style="border: 1px solid #bbb" cellspacing="0">
        <tr>
          <th>新闻ID</th>
          <th style="width: 80px">昵称</th>
          <th style="width: 380px">新闻标题</th>
          <th style="width: 700px">新闻描述</th>
          <th style="width: 100px">上架状态</th>
          <th style="width: 200px">操作</th>
        </tr>
        <tr v-for="v in tableData" :key="v.nid" :p="v">
          <td>{{ v.nid }}</td>
          <td>{{ v.unickname }}</td>
          <td>{{ v.nname }}</td>
          <td class="tb">{{ v.disc }}</td>
          <td class="shangjia" v-if="v.status == 1">已上架</td>
          <td class="xiajia" v-if="v.status == 0">已下架</td>
          <td>
            <span
              class="sp"
              :class="{ disabled: v.status == 1 }"
              @click="onlineNews(v.nid)"
              style="cursor: pointer"
              >上架</span
            >
            <span
              class="sp1"
              :class="{ disabled: v.status == 0 }"
              @click="offNews(v.nid)"
              style="cursor: pointer"
              >下架</span
            >
          </td>
        </tr>
      </table>
    </div>
    <!-- 全选 -- 反选 -- 批量删除 -->

    <!-- 3. 分页 -->
    <MyPagination
      :total="pagecount"
      :pageSize="pageSize"
      @changePage="changePage"
      :currentPage="currentPage"
    />
  </div>
</template>

<script>
import MyPagination from "../../../components/MyPagination.vue";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      isAble: "",
      notAble: "",
      nid: "",
      chart: null,
      searchItem: "",
      tableData: [],
      total: 10,
      pageSize: 1,
      type: 1,
      list: [],
      dialogVisible: false,
      currentPage: 1, //选中的高亮页码
      title: "添加商品",
      rowData: {}, //当前行的数据对象
      pagecount: "",
    };
  },
  mounted() {
    this.changePage();
  },
  watch: {
    $router() {
      this.search();
    },
  },
  methods: {
    search() {
      const url = `http://localhost:4444/search`;

      const params = `searchitem=${this.searchItem}`;
      console.log(params);
      // if (!val) {
      //   this.http(1);
      //   this.currentPage = 1;
      //   this.type = 1;
      //   return;
      // }
      this.$http.post(url, params).then((res) => {
        console.log("搜索---", res.data);
        this.currentPage = 1;
        if (res.status === 200) {
          this.tableData = res.data.result; //获取的搜索的总数据条数---数据分割
          console.log("res", res.result);
          console.log("tableData", this.tableData);
          //假设需要分页---我们处理分页----
          this.total = res.data.result.length;
          this.pageSize = 3;
          this.tableData = res.data.result.slice(0, 3);
          this.type = 2;
          console.log("分页", this.currentPage);
        } else {
          this.tableData = [];
          this.total = 1;
          this.pageSize = 1;
          this.type = 1;
        }
      });
    },
    //上架新闻
    onlineNews(nid) {
      const url = `http://localhost:4444/updateup`;
      console.log(nid);
      const params = `nid=${nid}`;
      console.log(params);
      this.$http.post(url, params).then((res) => {});
      location.reload();
    },
    //下架新闻
    offNews(nid) {
      const url = `http://localhost:4444/updatedown`;
      // console.log(this.tableData.nid);
      const params = `nid=${nid}`;
      console.log(params);
      this.$http.post(url, params).then((res) => {});
      location.reload();
    },
    changePage(page) {
      this.currentPage = page;
      console.log(page);
      console.log(this.currentPage);

      if (this.type == 1) {
        this.http(page); //商品列表分页
      } else {
        //搜索分页 1 2 3 4 --  list=[0,1,2,3,4,5,6,7,8]  0-3  3-6  6-9 9-12
        console.log("搜索的分页处理---");
        //（num-1）*3  num*3
        this.tableData = this.list.slice((num - 1) * 3, num * 3);
      }
    },
    //新闻列表获取
    http(page = 1) {
      const url = `http://localhost:4444/loadall?page=` + page;
      this.$http.get(url).then((res) => {
        console.log(res);
        this.pagecount = res.data.pagecount;
        page = res.data.page;
        this.total = res.data.rowcount;

        this.tableData = res.data.results;
        console.log(this.tableData);
      });
    },
  },
  created() {
    this.http();
  },
  //生命周期函数
};
</script>
<style lang='less' scoped>
table {
  table-layout: fixed;
  .tb {
    margin: 0 !important;
    padding: 0 !important;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.shangjia {
  text-align: center;
  color: #00cc00;
}
.xiajia {
  text-align: center;
  color: #cc3333;
}

.sp {
  display: inline-block;
  border: 1px solid gray;
  height: 26px;
  line-height: 26px;
  margin-left: 20px;
  padding: 0 10px;
  border-radius: 4px;
  &.disabled {
    pointer-events: none;
    border-color: lightgray;
    color: lightgray;
  }
  &:hover {
    color: #00cc00;
  }
}
.sp1 {
  display: inline-block;
  border: 1px solid gray;
  height: 26px;
  line-height: 26px;
  margin-left: 10px;
  padding: 0 10px;
  border-radius: 4px;
  &.disabled {
    pointer-events: none;
    border-color: lightgray;
    color: lightgray;
  }
  &:hover {
    color: #cc3333;
  }
}

.goods {
  margin: 10px;
}
.position {
  // background: #fff;
  padding: 10px;
  // border: 1px solid #eee;
  margin-bottom: 10px;
}
.header {
  display: flex;
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
  button {
    margin-left: 20px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
.wrapper {
  margin: 10px 0;
}
</style>